<template>
  <a-button color="success">成功按钮</a-button>
  <a-button color="error">错误按钮</a-button>
  <a-button color="warning">警告按钮</a-button>

  <a-space direction="vertical">
    <a-switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
    <a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
    <a-switch v-model:checked="state.checked3">
      <template #checkedChildren><check-outlined /></template>
      <template #unCheckedChildren><close-outlined /></template>
    </a-switch>
  </a-space>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';

  const state = reactive({
    checked1: true,
    checked2: false,
    checked3: false,
  });

  // 模拟网络请求等操作
  const updateSwitchValues = () => {
    state.checked1 = !state.checked1;
    state.checked2 = !state.checked2;
    state.checked3 = !state.checked3;
  };

  onMounted(() => {
    // 每5秒更新一次开关状态，形成无限循环
    setInterval(updateSwitchValues, 5000);
  });
</script>
